<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }
            input[type=number]{width:60px;}



        </style>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div id="app">

        <div class="card">

            <div class="card-header">
                <h3 class="card-title"> 工作日（例外）配置<small>默认周一至周五为工作日，仅需配置法定假以及调休等额外情况。</small> </h3>
            </div>
            <div class="card-body">
                <div>
                    <input type="date" v-model="workDay.dateString" />
                    <select  v-model="workDay.value">
                        <option value="">--</option>
                        <option value="0">休息</option>
                        <option value="1">上班</option>
                    </select>
                    <button @click="update(workDay)">保存</button>
                </div>

                <div>
                    <button onclick="loadData()">Search</button>

                    每页<input type="number" step="1" v-model.lazy="selector.pageSize">条。
                    第<input type="number" step="1" min="1" :max="Math.ceil(total/selector.pageSize)"
                             v-model="selector.pageNo">页。
                    共<code>{{total}}</code>条，<code>{{Math.ceil(total/selector.pageSize)}}</code>页。
                </div>
                <table class="table table-hover table-bordered">
                    <tr>
                        <td>#</td>
                        <td>日期</td>
                        <td>星期</td>
                        <td>类型</td>
                        <td>备注</td>
                        <td> -</td>
                    </tr>
                    <template v-for="(work,index) in list">
                        <tr @dblclick="work.editing = !work.editing">
                            <td>{{index+1}}</td>
                            <td v-if="work.editing"><input type="date" v-model="work.dateString" /></td>
                            <td v-else>{{new Date(work.date+8*1000*3600).toLocaleDateString()}}</td>

                            <td> {{work.dayOfWeek}}</td>
                            <td  v-if="work.editing">
                                <select v-model="work.value">
                                <option value="">--</option>
                                <option value="0">休息</option>
                                <option value="1">上班</option>
                            </select></td>
                            <td  v-else> {{work.value}}</td>
                            <td   v-if="work.editing"><input v-model="work.remark"></td>
                            <td v-else>{{work.remark}}</td>

                            <td>
                                <button @click="update(work)">保存</button>
                            </td>
                        </tr>

                    </template>
                </table>

            </div>

            <div style="position:fixed;right:10px;bottom:10px;">
                <a class="btn btn-default" @click="newWorkDay()">新增工作日</a>
            </div>

        </div>
    </div>

</div>

<th:block th:fragment="footer">

    <script>


        const { createApp } = Vue;
            var app = createApp({
            data() {
              return {
                list:[], total:0,catalogList:[],
                currentIndex : -1,work:{},
                workDay:{ dateString: new Date( )},
                selector:{target:{},mine:1,withTaskList:1,withPrettyActor:1,pageSize:100,pageNo:1,urgent:null,status:null}
              }
            },methods:{
                update:function (workDay){
                    if(!workDay || !workDay.dateString) return;
                    var date = (new Date(workDay.dateString)).getTime();
                    workDay.date=date;
                    var url = "/pm/work/day/update";
                    axios.post(url, workDay).then(function (response) {
                        console.log("response",response)
                        loadData();
                    }).catch(function (error) {
                        console.log("error",error);
                        loadData();
                    });
                },newWorkDay:function(){
                    var issue = { date:new Date().getTime()};
                    this.list.push(issue)
                    this.submit(issue)
                },loadData:function(){
                    var selector = this.selector || {}
                    axios.post('/pm/work/day/list', selector).then((response)=> {
                        console.log("response",response)
                        this.list = response.data.data||[];
                        this.total=response.data.total || 0;
                        for(var i=0;i<this.list.length;i++){
                            var o = this.list[i];
                            o.dateString =  new Date(o.date) ;
                        }
                    }).catch(function (error) {
                        console.log("error",error);
                    });
                },dictList:function(catalog){
                    for(var i=0;i<this.catalogList?.length;i++){
                        var ca = this.catalogList[i];
                        if(ca.code == catalog){
                            return ca.dictList || [];
                        }
                    }
                    return [];
                }
             },
            watch:{
                selector:{
                    handler:function(nv,ov){
                        loadData()
                    },deep:true
                }
            }
          }).mount('#app');


        function loadData( ){
            app.loadData();
        }

        window.onload=function(){
           loadData( );
        }



    </script>
</th:block>
</body>
</html>